<template>
	<view>
	<Header title="我的体验金" :showBack="true"></Header>
	<view class="container">
		<!-- <image class="bg-imgs" src="../../static/img/contentBg.jpg" mode=""></image> -->
		<view class="tab">
			<view>
				<view @click="changeIndex(0)" :class="{'active':curIndex==0}">未使用</view>
				<view @click="changeIndex(1)" :class="{'active':curIndex==1}">已使用</view>
			</view>
			<view :style="{'transform': `translateX(${curIndex*100}%) scaleX(0.4)`}"></view>
		</view>
		<view class="box">
			<block v-for="(item,index) in couponList" :key="index">
				<view class="item flex-warp" :class="item.effective?'':'lose-efficacy'">
					<image v-if="!item.effective" class="efficacy-logo" src="../../static/loseEfficacy_icon.png" mode=""></image>
					<view class="lt-content flex-warp">
						<view class="price-box">
							<view class="rmb">￥</view>
							<view class="price">{{item.amount/100}}</view>
						</view>
						<view class="coupon-msg">
							<view class="coupon-name">{{item.stockName}}</view>
							<!-- <view class="coupon-time">{{item.startTime.split(' ')[0]}}至{{item.endTime.split(' ')[0]}}</view> -->
							<view class="coupon-time">{{item.startTime}}至{{item.endTime}}</view>
						</view>
					</view>
					<view class="rt-content">体<br/>验<br/>金</view>
				</view>
			</block>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: uni.getStorageSync('info'),
				curIndex: 0,
				limit: 15,
				page: 1,
				couponList: [],
				isQingqiu: false,
			}
		},
		onLoad(e) {
			this.getCouponList(1)
		},
		onReachBottom() {
			if (this.isQingqiu) {
				this.isQingqiu = false
				this.getCouponList(this.curIndex+1)
			}
		},
		methods: {
			getCouponList(flag){
				let data = {
					"pageSize": this.limit,
					"pageNum": this.page,
					"condition":{
						"usedFlag": flag,
						"memberCardId": this.info.id,
						"mode": 2
					}
				}
				this.$http('/service/api/couponStock/getCouponList',data,res=>{
					if (res.data.data.items.length > 0) {
						let arr = res.data.data.items.map((items)=>({
						...items,
						startTime: items.startTime.slice(0,items.startTime.length-3),
						endTime: items.endTime.slice(0,items.endTime.length-3),
						effective: new Date(items.endTime.replace(/-/g,"/")).getTime() > Date.parse(new Date())? true : false
					}))
						this.couponList= this.couponList.concat(arr)
						if (res.data.data.items.length == this.limit) {
							this.page++
							this.isQingqiu = true
						}
					}
				})
			},
			
			changeIndex(index){
				if(this.curIndex == index) return;
				this.curIndex = index
				this.page = 1
				this.couponList = []
				this.getCouponList(index+1)
			},
		}
	
	}
</script>

<style  scoped lang="less">
	image, view, text{ letter-spacing: normal; }
	.container{
		// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
	}
	.flex-warp{
		display: flex;
		align-items: center;
	}
.tab{
	width: 100%;
	font-size: 30upx;
	color: #888888;
	top: 0;
	>view:first-child{
		display: flex;
		>view{
			width: 50%;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
		}
		>view.active{
			// color: #57BF62;
			color: #408F70;
		}
	}
	>view:last-child{
		width: 50%;
		height: 4upx;
		// background-color: #57BF62;
		background-color: #408F70;
		transition: 0.1s all ease;
	}
}
.box{
	width: 100%;
	padding-top: 20upx;
	padding-bottom: 40upx;
	.item{
		// width: 650upx;
		width: 630upx;
		// height: 156upx;
		height: 165upx;
		background-image: url('../../static/couponBG.png');
		background-size: 100% 100%;
		margin: 20upx auto;
		color: #4e411f;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.lt-content{
			.price-box{
				display: flex;
				width: 125upx;
				height: 125upx;
				line-height: 125upx;
				justify-content: center;
				// margin-left: 13upx;
				margin-left: 14upx;
				// margin-right: 46upx;
				margin-right: 38upx;
				align-items: baseline;
				.price{
					font-size: 54upx;
					font-weight: bold;
					letter-spacing: -2upx;
				}
			}
			.coupon-msg{
				font-size: 26upx;
				width: 376upx;
				.coupon-name{
					font-size: 26upx;
					font-weight: bold;
					width: 100%;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.coupon-time{
					margin-top: 20upx;
					// font-size: 24upx;
					font-size: 20upx;
					letter-spacing: initial;
				}
			}
		}
		.rt-content{
			padding-right: 50upx;
			font-size: 26upx;
		}
	}
	.item.lose-efficacy{
		background-image: url('../../static/loseEfficacy.png');
		position: relative;
		.efficacy-logo{
			position: absolute;
			right: 146upx;
			top: 24upx;
			width: 100upx;
			height: 62upx;
			z-index: 999;
		}
	}
	view.button{
		width: 600upx;
		margin: 50upx auto;
		background-color: #19BE6B;
		color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 12upx;
	}
}

</style>
